<template>
  <div>
    <Prodetail ref="checkoutproductdetail"></Prodetail>
    <Refuse ref="refuse" @switchRejStatus="switchRejStatus"></Refuse>
    <Pass ref="pass" @switchPassStatus="switchPassStatus"></Pass>
    <EditURL ref="editurl"></EditURL>
    <el-row :gutter="10" style="padding-bottom: 10px">
      <el-col :span="4">
        <el-input
          @input="inputProductName"
          :value="pname"
          placeholder="产品名称"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          @input="inputProductNumber"
          :value="number"
          placeholder="产品编号"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          @input="inputCompanyName"
          :value="cname"
          placeholder="企业名称"
        />
      </el-col>
      <el-col :span="3">
        <el-button @click="checkoutfirst">查询</el-button>
      </el-col>
    </el-row>
    <el-tabs
      v-model="activeName"
      class="i-el-tabs"
      type="card"
      @tab-click="handleClick"
      style="margin-top: 10px;"
    >
      <el-tab-pane label="待审核" name="0">
        <el-table
          ref="filterTable"
          :data="pending"
          style="width: 100%"
          :header-row-class-name="tableRowClassName"
        >
          <el-table-column label="产品编号" width="180" align="center">
            <template slot-scope="scope">{{
              scope.row.porcelainCode
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="名称" align="center" width="180">
            <template slot-scope="scope">{{
              scope.row.porcelainName
            }}</template>
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="提交企业"
            align="center"
            width="100"
          >
            <template slot-scope="scope">{{ scope.row.userCode }}</template>
          </el-table-column>
          <el-table-column label="产品信息" align="center" width="100">
            <template slot-scope="scope">
              <EButton
                :title="'查看'"
                @checkout="
                  checkout(scope.row.status, scope.$index, scope.row.id)
                "
              ></EButton>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag>待审核</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="3D模型文件" align="center" width="100">
            <template slot-scope="scope">
              <EButton :title="'下载'"></EButton>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" align="center" width="180">
            <template slot-scope="scope">{{
              new Date(scope.row.submitTime).toLocaleDateString()
            }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="doPass(scope.$index, scope.row.status)"
                >通过</el-button
              >
              <el-button @click="doRefuse(scope.$index, scope.row.status)"
                >驳回</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已通过" name="1">
        <el-table
          ref="filterTable"
          :data="toPass"
          style="width: 100%"
          :header-row-class-name="tableRowClassName"
        >
          <el-table-column label="产品编号" width="180" align="center">
            <template slot-scope="scope">{{
              scope.row.porcelainCode
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="名称" align="center" width="180">
            <template slot-scope="scope">{{
              scope.row.porcelainName
            }}</template>
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="提交企业"
            align="center"
            width="100"
          >
            <template slot-scope="scope">{{ scope.row.userCode }}</template>
          </el-table-column>
          <el-table-column label="产品信息" align="center" width="100">
            <template slot-scope="scope">
              <EButton
                :title="'查看'"
                @checkout="
                  checkout(scope.row.status, scope.$index, scope.row.id)
                "
              ></EButton>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="success">以通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="3D模型文件" align="center" width="100">
            <template slot-scope="scope">
              <EButton :title="'下载'"></EButton>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" align="center" width="180">
            <template slot-scope="scope">{{
              new Date(scope.row.submitTime).toLocaleDateString()
            }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <EButton :title="'编辑'" @edit="edit(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="未通过" name="-1">
        <el-table
          ref="filterTable"
          :data="didNotPass"
          style="width: 100%"
          :header-row-class-name="tableRowClassName"
        >
          <el-table-column label="产品编号" width="180" align="center">
            <template slot-scope="scope">{{
              scope.row.porcelainCode
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="名称" align="center" width="180">
            <template slot-scope="scope">{{
              scope.row.porcelainName
            }}</template>
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="提交企业"
            align="center"
            width="100"
          >
            <template slot-scope="scope">{{ scope.row.userCode }}</template>
          </el-table-column>
          <el-table-column label="产品信息" align="center" width="100">
            <template slot-scope="scope">
              <EButton
                :title="'查看'"
                @checkout="
                  checkout(scope.row.status, scope.$index, scope.row.id)
                "
              ></EButton>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="danger">未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="3D模型文件" align="center" width="100">
            <template slot-scope="scope">
              <EButton :title="'下载'"></EButton>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" align="center" width="180">
            <template slot-scope="scope">{{
              new Date(scope.row.submitTime).toLocaleDateString()
            }}</template>
          </el-table-column>
          <el-table-column label align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-pagination
      layout="prev, pager, next"
      @current-change="changeIndex"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
/*eslint-disable*/
import EButton from "../../components/ButtonBox/index";
import Prodetail from "../../components/Dialog/Prodetail";
import Pass from "../../components/Dialog/Pass";
import Refuse from "../../components/Dialog/Refuse";
import EditURL from "../../components/Dialog/EditURL";

import { getAllList, getCheckoutFirst } from "../../utils/productcheck";

export default {
  name: "index",
  data() {
    return {
      activeName: "0",
      pname: "",
      cname: "",
      number: "",
      pending: [],
      toPass: [],
      didNotPass: [],
      pageIndex: 1,
      total: 10,
    };
  },
  components: {
    EButton,
    Prodetail,
    Pass,
    Refuse,
    EditURL,
  },
  methods: {
    handleClick() {
      if (this.activeName == 0) {
        getAllList("/listPage", {
          pageNum: this.pageIndex,
          pageSize: 6,
          queryCondition: {
            status: this.activeName,
          },
        })
          .then((rawRes) => rawRes.data)
          .then((res) => {
            this.pending = res.records;
            this.total=res.pages*10
          });
      }
      if (this.activeName == 1) {
        getAllList("/listPage", {
          pageNum: this.pageIndex,
          pageSize: 6,
          queryCondition: {
            status: this.activeName,
          },
        })
          .then((rawRes) => rawRes.data)
          .then((res) => {
            this.toPass = res.records
            this.total=res.pages*10;
          });
      }
      if (this.activeName == -1) {
        getAllList("/listPage", {
          pageNum: this.pageIndex,
          pageSize: 6,
          queryCondition: {
            status: this.activeName,
          },
        })
          .then((rawRes) => rawRes.data)
          .then((res) => {
            this.didNotPass = res.records
            this.total=res.pages*10;
          });
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
    },
    checkout(status, index, id) {
      if (status == 0) {
        this.$refs.checkoutproductdetail.changeVisible(this.pending[index]);
      }
      if (status == 1) {
        this.$refs.checkoutproductdetail.changeVisible(this.toPass[index]);
      }
      if (status == -1) {
        this.$refs.checkoutproductdetail.changeVisible(this.didNotPass[index]);
      }
    },
    //搜索栏旁查询按钮
    async checkoutfirst() {
      let rawRes = await getCheckoutFirst("/listPage", {
        pageNum: this.pageIndex,
        pageSize: 6,
        queryCondition: {
          porcelainCode: this.number,
          porcelainName: this.pname,
          userCode: this.cname,
          status: this.activeName,
        },
      });
      if (this.activeName == 0) {
        this.pending = rawRes.data.records;
        this.total=rawRes.data.pages*10
      }
      if (this.activeName == 1) {
        this.pass = rawRes.data.records;
        this.total=rawRes.data.pages*10
      }
      if (this.activeName == -1) {
        this.didNotPass = rawRes.data.records;
        this.total=rawRes.data.pages*10
      }
    },
    doPass(index, status) {
      let prodCode = this.pending[index].porcelainCode;
      this.$refs.pass.showdialog(prodCode);
    },
    doRefuse(index) {
      this.$refs.refuse.getDoReFuse(this.pending[index]);
    },
    edit(index) {
      this.$refs.editurl.showdialog(this.toPass[index]);
    },
    //el-input输入框获取值
    inputProductName(val) {
      this.pname = val.trim();
      console.log(val);
    },
    inputCompanyName(val) {
      this.cname = val.trim();
      console.log(val);
    },
    inputProductNumber(val) {
      this.number = val.trim();
      console.log(val);
    },
    //分页下标
    changeIndex(i) {
      this.pageIndex = i;
      this.handleClick();
    },
    pageLoad() {
      getAllList("/listPage", {
        pageNum: this.pageIndex,
        pageSize: 6,
        queryCondition: {
          status: this.activeName,
        },
      })
        .then((rawRes) => rawRes.data.records)
        .then((res) => {
          this.pending = res;
        });
      getAllList("/listPage", {})
        .then((rawRes) => rawRes.data.pages)
        .then((res) => {
          this.total = res * 10;
        });
    },
    //驳回和拒绝和通过的页面reload方法调用,来自其它页面
    switchPassStatus() {
      this.pageLoad();
    },
    switchRejStatus() {
      this.pageLoad();
    },
  },
  created() {
    this.pageLoad();
  },
};
</script>

<style scoped></style>
